<template>
	<view style="padding:10px">
		<view>
			<u-form>
				<u-form-item label="警务助理:"  border-bottom="false" label-width="150" >
					<zhilin-picker v-model="jwzlPickerShow" :datalist="options.jwzls" :multiple="false"
				    @confirm="jwzlSelect" :showSearch="true"></zhilin-picker>
					<u-input v-model="jwzlName" @click="jwzlPickerShow=!jwzlPickerShow" :disabled="true" placeholder="请选择警务助理"/>
					<u-icon class="arrowIcon" :name="arrowName" :class="[jwzlPickerShow ? 'arrowIconRotateRight' : 'arrowIconRotateDown']"></u-icon>
				</u-form-item>
				<u-form-item label="日期"  border-bottom="false" label-width="150" >
					<u-input v-model="search.time" @click="show=!show" disabled="true" border="true"  />
				</u-form-item>
			</u-form>
			<u-button  @click="query()" :disabled="submitBtn" type="primary">查询</u-button>
			<map id="queryMap" ref="queryMap" class="map" 
			:latitude="location.lat" 
			:longitude="location.lng" 
			:markers="covers"
			:include-points="includePoints"
			:show-location="true"
			>
				<!-- <cover-image class="control" src="/static/map/location-fill.png" @click="controlclick">
					
				</cover-image> -->
			</map>
			
		</view>
		<u-calendar v-model="show" :mode="mode" @change="change"></u-calendar>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import { mapState} from 'vuex';
	var appMap = null;
	import zhilinPicker from "@/components/zhilin-picker/zhilin-picker.vue"
	export default {
		components:{zhilinPicker},
		computed:mapState(['user', ]),
		data() {
			return{
				mapTimer:'',
				includePoints:[],
				jwzlName:'',
				jwzlPickerShow:false,
				arrowName:'arrow-down',
				submitBtn:false,
				queryMap:null,
				show: false,
				mode: 'date',
				search:{
					time: this.$util.getNowD(),
					jwzl:''
				},
				location:{
					lat:'',
					lng:''
				},
				covers:[],
				options: {
					jwzls:[]
				}
			}
		},
		methods:{
			jwzlSelect(value){
				this.search.jwzl = value;
				let res = this.options.jwzls.find(jwzl => jwzl.value === parseInt(value));
				this.jwzlName = res.label;
			},
			change(e){
				this.search.time  = e.result;
			},
			validateFormData(){
				let flag = true;
				if(this.search.jwzl==undefined||this.search.jwzl==''){
					this.$refs.uToast.show({
						title: '请选择警务助理',
						type: 'error'
					})
					flag = false;
					return flag;
				}
				return flag;
			},
			query(){
				if(this.validateFormData()){
					this.submitBtn = true;
					const that = this;
					this.$http.get("/aqff/query",{params:this.search}).then(res => {
						let data = res.data.data;
						if(data){
							that.parseData(data);
							that.submitBtn = false;
						}else{
							that.submitBtn = false;
						}
					}).catch(err => {
						this.submitBtn = false;
					})
				}	
			},
			controlclick(e){
				let obj  = {
					latitude:this.location.latitude,
					longitude:this.location.longitude
				}
				this.queryMap.moveToLocation(obj);
				//uni.openLocation(obj);
			},
			setLoaction(){
				let locations = this.$auth.getLocationInfo();
				console.log('locations......');
				console.log(locations);
				this.location.lat = locations.lat;
				this.location.lng = locations.lng;
				
			},
			parseData(data){
				this.includePoints = [];
				this.covers = [];
				for(let a of data){
					let mark = {
						id : a.id,
						latitude :a.lat,
						longitude : a.lng,
						iconPath : '/static/map/location.png',
						callout:{
							content:a.time,
							display:'ALWAYS',
							bgColor: '#6cf',
							borderRadius: 2
						}
					}
					let points = {
						latitude :a.lat,
						longitude : a.lng
					}
					this.covers.push(mark);
					this.includePoints.push(points);
				}
				
			}
		},
		onLoad() {
			this.setLoaction();
			//this.mapTimer = setInterval(this.setLoaction,5000);
		},
		onReady() {
			this.queryMap = uni.createMapContext("queryMap",this);
			console.log(this.queryMap);
			this.options.jwzls = this.user.jwzls;
			
		},
		destroyed(){
			console.log("destory");
			//clearInterval(this.mapTimer);
		},
		onHide(){
			console.log("onHide");
			//clearInterval(this.mapTimer);
		}
	}
</script>

<style>
	.map{
		margin-top: 25rpx;
		margin-bottom: 25rpx;
		width: 100%; 
		height: 500rpx;
	}
	.control{
		width: 50rpx;
		height: 50rpx;
		position: absolute;
		bottom: 25rpx;
		right: 25rpx;
	}
	
	.arrowIcon{
		position: absolute;
		right: 10rpx;
		top: 40rpx;
	}
	
	.arrowIconRotateRight{
		transition: all .5s ease 0s;
		transform: rotate(-180deg);
	}
	
	.arrowIconRotateDown{
		transition: all .5s ease 0s;
		transform: rotate(0deg);
	}
</style>
